<!--学习笔记-->
<template>
  <div class="container">
    <div class="notebook_box w_container">
      <div class="lt">
        <NoteTag />
        <Friendly />
      </div>
      <div class="rt">
        <div class="infinite-list-wrapper" style="overflow: auto">
          <el-timeline
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
          >
            <el-timeline-item
              timestamp="2018/4/12"
              placement="top"
              v-for="i in count"
              class="list-item"
              :key="i"
              icon="el-icon-sunny"
              size="large"
            >
              <el-card>
                <div class="card_item">
                  <span class="lt_tag">vue</span>
                  <h4>bug怎么解决啊 啊啊啊啊啊</h4>
                  <p class="content">王小虎 提交于 2018/4/12 20:46</p>
                  <div class="foot">
                    <span>浏览（100）</span>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>

          <p class="tips" v-if="loading">加载中...</p>
          <p class="tips" v-if="noMore">我是有底线的</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Item from "./noteItem";
import NoteTag from "./noteTag";
import Friendly from "./friendly";
export default {
  components: {
    Item,
    NoteTag,
    Friendly,
  },
  data() {
    return {
      count: 10,
      loading: false,
    };
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
.notebook_box {
  position: relative;
  margin-top: 20px;
  .lt {
    width: 300px;
    position: absolute;
    left: 0;
    top: 0;
    padding-right: 12px;
  }
  .rt {
    padding-left: 300px;
    padding-bottom: 50px;
    .infinite-list-wrapper {
      background: #fff;
      padding: 15px 17px;
    }
    .list-item {
      /deep/ {
        .el-timeline-item__node {
          width: 26px;
          height: 26px;
          left: -7px;
          top: -5px;
          transition: all 300ms ease-in-out;
          .el-timeline-item__icon {
            font-size: 18px;
          }
        }
        .el-timeline-item__timestamp {
          font-size: 14px;
        }
        .el-timeline-item__content {
          .el-card {
            box-shadow: none;
            transition: all 300ms ease-in-out;
          }
        }
      }
      &:hover {
        /deep/ {
          .el-timeline-item__node {
            background-color: $primary_clr;
          }
          .el-timeline-item__timestamp {
            color: $primary_clr;
          }
          .el-timeline-item__content {
            .el-card {
              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
    .card_item {
      h4 {
        display: inline-block;
        font-size: 18px;
      }
      .content {
        line-height: 22px;
        margin: 14px 0;
      }
      .foot {
        text-align: right;
        margin-top: 12px;
      }
    }
  }
  .tips{
    text-align: center;
  }
}
</style>
